<html>
  <head>
    <title>SIMILE Widgets | Exhibit | Examples | Freebase Albums</title>
    <link rel='stylesheet' href='../../api/styles/common.css' type='text/css' />
    
    <script>
        var thePolicesAlbumsQuery = [{
            type: "/music/album",
            artist: "The Police",
            name: null,
            release_date: null,
            "/common/topic/image": { id: null, limit: 1 }
        }];
    </script>
    <link ex:query="thePolicesAlbumsQuery" type="application/freebase" rel="exhibit/data"></link>    
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js -->
    <script src="../../api/exhibit-api.js"></script>
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/2.2.0/extensions/freebase/freebase-extension.js -->
    <script src="../../api/extensions/freebase/freebase-extension.js"></script>
    
    <style> 
        .album { border: 1px solid #ccc; padding: 0.25em; width: 300px;}
        div.exhibit-thumbnailView-itemContainer { padding: 0.25em; margin: 0.25em;}
    </style>
  </head>
  <body>
    <ul id="path">
      <li><img src="../../images/left_arrow_img.png" onclick="window.qml.showExampleChooser();"/></li>
      <li><input type="checkbox" onclick="window.qml.enableScroll(this.checked);"
		 checked="true" class="flickable-checkbox"><span  onclick="(function() { var chk = SimileAjax.jQuery('input.flickable-checkbox')[0]; chk.click(); })();">Flickable??</span></input></li>
      <li><large>Freebase Albums</large></li>
    </ul>
<!-- <div id="header">
      <h1>Freebase Albums</h1>
    </div>
-->
    <div id="content">
      <div ex:role="viewPanel">
          <div ex:role="view" ex:viewClass="Thumbnail" ></div>
          </div>
      </div>
      
      <table ex:role="lens" class="album" style="display: none;"><tr>
          <td><img height="150px" width="150px" ex:src-content=".image" /></td>
          <td>
                  <div ex:content=".label"></div>
                  <div ex:content=".release_date"></div>
          </td>
      </tr></table>
    </div>
  </body>
</html>
